<script>
import Input from './components/input';
import Radio from './components/radio';
import Cascader from './components/cascader.vue';
import Select from './components/select';
import CheckBox from './components/checkbox';
import Txt from './components/txt';
import Textarea from './components/textarea';
import Upload from './components/upload';
import Date from './components/date';
import Number from './components/number';
import SpecialNumber from './components/specialNumber.vue';
import Button from './components/button';
import ButtonShow from './components/buttonShow';
import TimeGroup from './components/timeGroup';
import Time from './components/time';
import SuffixNumber from './components/suffixNumber';
import UploadFileShow from './components/uploadFileShow.vue';
import TimePicker from './components/timePicker.vue';
import Days from './components/Ldays.vue';
import Editor from './components/vueEditor'
import { isClass } from '@/utils';
// import formatDate from '@/utils/formatDate';
const ComponentsItem = { Input, Radio, Cascader, Select, Txt, Textarea, Textarea, Date, Number, Button, ButtonShow, TimeGroup, TimePicker, CheckBox, Days, Editor, Upload };
export default {
    render() {
        let getComponents = (el,index)=> {
            let show = el.show !== undefined ? el.show : true
            console.log(el.show)
            let component = ComponentsItem[el.type];
            if (show) {
                return (
                    <el-form-item key={index} label={el.label+':'} prop={el.prop} class={{'inline': this.inline}} labelWidth={el.labelWidth} >
                        <component ref={'item' + index}
                        on={{EventHandler: this.EventHandler}}
                        {...{ attrs: {...el, defaultValue:  this.ruleForm[el.prop],controlType: this.controlType} }}/>
                        <span class='form-item-tip'>{el.tip}</span>
                    </el-form-item>
                )
            }
        }
         let getContent = () => {
            if (this.typeClass === 'formbox') {
                return (
                    <el-form
                        attrs={{model: this.ruleForm}}
                        rules={this.rules}
                        ref={"ruleForm"}
                        label-width={this.LabelWidth}
                        label-position={this.LabelPosition}
                        validate-on-rule-change={false}
                        class={this.DomClass}
                        inline={this.inline}
                        inline-message={true}
                        {...{on: {input: this.hanlderEvent}}}
                    >
                        <div class="form-title">{this.title}</div>
                        {
                            this.ItemList.map((item,index) => getComponents(item,index))
                        }
                    </el-form>
                )
            } else {
                return (
                    <div class="Avie_search_box">
                        {this.ItemList.map((item, index) => {
                            let component = ComponentsItem[item.type];
                            let ref_ = item.type + "" + index;
                            return (
                               <div class="Box_">
                                    {
                                        !!item.label ? 
                                            <span class="label_">{item.label}</span>
                                         : ''
                                    }
                                    <component
                                        key={index}
                                        ref={ref_}
                                        index={index}
                                        {...{ attrs: {...item, defaultValue: this.ruleForm[item.prop]} }}
                                        on={{EventHandler: this.EventHandler}}
                                    />
                                </div>
                            );
                        })}
                        <button class="Avie_btn_confirm" on={{click: this.InquireInfo}}>
                            查询
                        </button>
                        <button class="Avie_btn_cancel" on={{click: this.ClearInfo}}>
                            清空
                        </button>
                    </div>
                )
            }
        }
        return (
            <div class="form-box">
                {
                    getContent()
                }
            </div>
        )
    },
    components: {
        Input,
        Radio,
        Cascader,
        Select,
        CheckBox,
        Txt,
        Textarea,
        Upload,
        Date,
        Number,
        SpecialNumber,
        Button,
        TimeGroup,
        Time,
        SuffixNumber,
        UploadFileShow,
        ButtonShow,
        TimePicker,
    },
    props: {
        LabelWidth: {
            type: String,
            default: '80px',
        },
        LabelPosition: {
            type: String,
            default: 'left',
        },
        DomClass: {
            type: Array,
            default: () => [],
        },
        ItemList: {
            type: Array,
            default: () => [],
        },
        inline: {
            type: Boolean,
            default: false,
        },
        title: {
            type: String,
            default: ''
        },
        formData: {
            type: Object,
            default: () => {}
        },
        typeClass: {
            type: String,
            default: 'formbox'
        },
        controlType: {
            type: String,
            default: 'add'
        }
    },
    computed: {
        ruleForm: {
            get () {
                return this.formData
            },
            set (v) {
                this.$emit('update:formData', this.ruleForm)
            }
        },
        rules () {
            let rules = {};
            this.ItemList.forEach(el => {
                if (el.show === undefined) el.show = true
                if (!!el.show && el.rules && el.rules.length > 0) {
                    rules[el.prop] = el.rules;
                }
                return el;
            });
            return rules
        }
    },
    data() {
        return {
        };
    },
    mounted() {
        this.$nextTick(() => {
            if (this.$refs.ruleForm && this.inline) {
                this.$refs.ruleForm.$el.querySelectorAll('.el-form-item__content').forEach(item => {
                    item.style.width = `calc(100% - ${this.LabelWidth})`
                })
            }
        })
    },
    methods: {
        EventHandler(type, prop, value) {
            if (type == 'change') {
                this.$set(this.ruleForm, prop, value)
                console.log(this.ruleForm)
            }
            if (type == 'changeTimeGroup') {
                this.$set(this.ruleForm, prop, [value.startTime, value.endTime])
            }
            if (type == 'blur') {
                this.$set(this.ruleForm, prop, value)
            }
            if (type == 'click') {
                this.$emit('btnClick', prop);
            }
            if (!['focus', 'SelectChange'].includes(type)) {
                this.$nextTick(() => {
                    this.$refs.ruleForm.validateField(prop);
                });
            }
            
            this.$emit('EventHandler', type, prop, value);
        },
        async Validate() {
            // let v = null;
            try {
                let data = this.$refs.ruleForm.validate();
                return data
            } catch {
                return Promise.reject()
            }
            let data = {};
            this.ItemList.forEach((el, index) => {
                // let value = this.$refs[`item${index}`][0].value;
                // if (el.type === 'Cascader') {
                //     data[el.prop] = value[value.length - 1] || '';
                // } else if (el.type === 'Upload') {
                //     data[el.prop] = value.map(el => {
                //         let url = '';
                //         if (el.response) {
                //             url = el.response.data;
                //         } else {
                //             url = el.url;
                //         }
                //         return {
                //             name: el.name,
                //             url,
                //             size: el.size,
                //             time: formatDate(el.uid, 'chinaTime'),
                //         };
                //     });
                // } else if (el.type == 'ButtonShow') {
                //     // data[el.prop] = el.baseInfo.defaultValue.map(el=>el.id)
                //     let key = el.propKey ||  'id';
                //     data[el.prop] = this.ruleForm[el.prop].map(el => el[key]);
                //     // console.log()
                // } else if (el.type == 'TimeGroup') {
                //     let value1 = this.$refs[`item${index}`][0].value1;
                //     data[el.prop] = [value, value1];
                // } else {
                //     data[el.prop] = value;
                // }
            });
            // return data;
        },
        setField(prop, data) {
            this.ruleForm[prop] = data;
        },
        ResetField() {
            this.$refs.ruleForm.resetFields();
        },
        hanlderEvent(e) {
            console.log(e, 'eeeeeee')
        },
        InquireInfo() {
            this.$emit("InquireInfo", this.ruleForm);
        },
        ClearInfo() {
            const keys = Object.keys(this.ruleForm)
            keys.forEach(item => {
                console.log(typeof this.ruleForm[item], this.ruleForm[item])
                this.ruleForm[item] = this.resetItem(this.ruleForm[item])
            })
            this.$emit('update:formData', this.ruleForm)
            this.$emit("ClearInfo");
        },
        resetItem(item) {
            if (typeof item === 'string') {
                return ''
            } else if (typeof item === 'number') {
                return 0
            } else if (typeof item === 'object'){
                if (item instanceof Array) {
                    return []
                } else {
                    return {}
                }
            } 
        }
    },
};
</script>

<style lang="scss">
.form-box{
   .form-title{
        font-size: 14px;
        font-weight: bold;
        margin-bottom: 10px;
        margin-top: 10px;
    }
    .inline{
        width: 48%;
        .el-form-item__content{
        }
    } 
    .form-item-tip{
        color: #999;
        margin-left: 10px;
        font-size: 12px;
    }
    .el-form-item__content{
        > div {
            width: 100%;
        }
        .el-select{
            width: 240px;
        }
    }
}

</style>
